<div class="uk-card uk-card-default uk-card-body nav">
    <ul class="uk-nav-default" uk-nav>
        <li class="uk-margin-small" routerLinkActive="nav-active">
            <a routerLink="/main/home">
                <span class="icon" uk-icon="icon: home"></span>
                <span class="uk-margin-small-left">Home</span>
            </a>
        </li>

        <li class="uk-margin-small" routerLinkActive="nav-active">
            <a routerLink="/main/form">
                <span class="icon" uk-icon="icon: pencil"></span>
                <span class="uk-margin-small-left">Form</span>
            </a>
        </li>

        <li class="uk-margin-small" routerLinkActive="nav-active">
            <a routerLink="/main/list">
                <span class="icon" uk-icon="icon: list"></span>
                <span class="uk-margin-small-left">List</span>
            </a>
        </li>

        <li class="uk-margin-small" routerLinkActive="nav-active">
            <a routerLink="/main/files">
                <span class="icon" uk-icon="icon: file-text"></span>
                <span class="uk-margin-small-left">Files</span>
            </a>
        </li>

        <li class="uk-margin-small">
            <a (click)="signOut()">
                <span class="icon" uk-icon="icon: sign-out"></span>
                <span class="uk-margin-small-left">Sign out</span>
            </a>
        </li>
    </ul>
</div>
